<!--感兴趣岗位--------------------------------------------------------->
<template>
  <div class="page-container">
    <!-- 主体内容区域 -->
    <el-row :gutter="20" justify="center">
      <el-col :span="16">
        <!-- 职位卡片列表 -->
        <el-card class="job-card" v-for="(job, index) in paginatedJobs" :key="index">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="job-info">
                <h3>{{ job.title }}</h3>
                <p><span style="color: #ff6700;">{{ job.salary }}</span> {{ job.requirements }}</p>
                <el-tag v-for="tag in job.tags" :key="tag" style="margin-right: 5px;">{{ tag }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="company-info">
                <img :src="job.logo" alt="公司logo" class="company-logo">
                <div class="company-details">
                  <h4>{{ job.companyName }}</h4>
                  <p>{{ job.industry }}</p>
                  <div class="contact-info">
                    <span>{{ job.contactName }}</span>
                    <el-button type="primary" icon="el-icon-phone" circle></el-button>
                    <span>{{ job.phone }}</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="20" justify="space-between">
            <el-col :span="12">
              <el-tag type="info">{{ job.postDate }} 发布日期</el-tag>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-button type="info">取消关注</el-button>
              <el-button type="primary">投一个呗</el-button>
            </el-col>
          </el-row>
        </el-card>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
              layout="prev, pager, next"
              :total="filteredJobs.length"
              :page-size="pageSize"
              v-model:current-page="currentPage"
              @current-change="handlePageChange"
              background
              style="margin-top: 20px;"
          />
        </div>
      </el-col>

      <!-- 右侧用户信息 -->
      <el-col :span="8">
        <div class="user-info">
          <img src="imgs/mwzz.png" alt="用户头像" class="user-avatar">
          <h4>艾薇儿 <span class="unverified">未实名</span></h4>
          <el-button type="primary" block>我的简历</el-button>
          <el-button type="info" block>我的招聘</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
/* 整体容器 */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

/* 职位卡片 */
.job-card {
  margin-bottom: 20px;
  text-align: left;
}

.job-info {
  margin-bottom: 20px;
}

.company-info {
  display: flex;
  align-items: center;
}

.company-logo {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.company-details {
  flex: 1;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 分页器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 用户信息 */
.user-info {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.unverified {
  background-color: #ffebe6;
  padding: 2px 5px;
  font-size: 12px;
  color: #f56c6c;
  margin-left: 8px;
}
</style>

<script>
export default {
  data() {
    return {
      // 模拟职位数据
      jobs: [
        {
          title: '高级UI产品设计师（深圳）',
          salary: '7K-13k',
          requirements: '经验3-5年/学历不限',
          tags: ['年终奖', '双休', '定期体检'],
          logo: 'imgs/mwzz.png',
          companyName: '京东数科',
          industry: 'IT|通信|电子|互联网',
          contactName: '马克',
          phone: '13710587130',
          postDate: '2018年11月24日'
        },
        {
          title: '高级UI产品设计师（深圳）',
          salary: '7K-13k',
          requirements: '经验3-5年/学历不限',
          tags: ['年终奖', '双休', '定期体检'],
          logo: 'imgs/mwzz.png',
          companyName: '美味不用等',
          industry: 'IT|通信|电子|互联网',
          contactName: '晶晶',
          phone: '13710587130',
          postDate: '2018年11月24日'
        }
      ],
      currentPage: 1,
      pageSize: 5,
      searchQuery: ''
    };
  },
  computed: {
    filteredJobs() {
      if (!this.searchQuery) return this.jobs;
      const query = this.searchQuery.toLowerCase();
      return this.jobs.filter(job =>
          job.title.toLowerCase().includes(query) ||
          job.companyName.toLowerCase().includes(query)
      );
    },
    paginatedJobs() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredJobs.slice(start, end);
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSearch() {
      this.currentPage = 1; // 回到第一页
    }
  }
};
</script>